<template>
	<div class="actives" >
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png"/>
				</div>
				<div class="add">
					营销详细
				</div>
				<div >
					
				</div>
			</div>

			<div class="top flex">
				
					<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)">{{item.titile}}</div>

				

			</div>
		</div>
		<div class="lists">

			<div class="list " v-for="(item,index) in tableData" :key="index">
				<div class="mes flex">
					<div class="left flex">
						<div>券号：{{item.date}}</div>
						<div>18231296694</div>
						<div class="flex"><span>{{item.status}}</span></div>
					</div>
					<div class="data flex">
						<img src="../assets/image/youxainqi.png"/><span>2019/07/01</span>
						
					</div>
				</div>
				
			</div>
		</div>
	</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				show: -1,
				activeIndex: -1,
				nameoptions: [{
						titile: '全部'
					},
					{
						titile: '已领取'
					},
					{
						titile: '未领取'
					},
					{
						titile: '已核销'
					},
					{
						titile: '过期'
					}
				],
				tableHeight: null,
				tableData: [{
						date: '1001',
						name: '满100减￥30',
						status: '活动进行中',
						bcy: '10/2/3',
						op: [{
								name: "营销详情"
							},
							{
								name: "撤销"
							}
						]
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3',
						op: [{
								name: "暂停/继续发放"
							},
							{
								name: "微端营销"
							},{
								name: "删除"
							},
							{
								name: "编辑"
							}
						]
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '招募中',
						bcy: '10/2/3'
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3'
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3'
					}
					, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3',
						op: [{
								name: "暂停/继续发放"
							},
							{
								name: "微端营销"
							},{
								name: "删除"
							},
							{
								name: "编辑"
							}
						]
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '招募中',
						bcy: '10/2/3'
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3'
					}, {
						date: '1001',
						name: '满100减￥30',
						status: '未审核',
						bcy: '10/2/3'
					}
					
					
				]
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back(){
				this.$router.go(-1)
			},

			checkItem(index) {
				this.isActive = index;
			},
			showop(index) {
				let that = this;
				if(that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示
				}

			},
			//查看详情
			creat_c() {
				this.$router.push({
					path: '/Create_coupons'
				});
			},
			
		},
		mounted() {
			

		},
	}
</script>

<style>

</style>
<style scoped="scoped">
	
	.active {
		color: #007AFF;
	}
	
	.top {
		font-size: 0.60869rem;
		width: 100%;
		max-width: 640px;
		background: white;
		justify-content: space-around;
		padding-bottom: 0.3rem;
	}
	
	
	
	.mes {
		margin: 0.5rem;
		font-size: 0.8rem;
		justify-content: space-between;
		flex-direction: column;
	}
	.data{
		justify-content: flex-end;
		align-items: center;
		padding-top: 0.8695rem;
		color: #868E91;
	}
	.data>img{
		width: 0.47826rem;
		height: 0.47826rem;
		padding-right: 0.2rem;
	}
	.data>span{
		font-size: 0.5217rem;
	}
	.title_left {
		
		width: 0.67391rem;
		height: 0.67391rem;
		
	}
	.title_left>img{
		
		width: 0.67391rem;
		height: 0.67391rem;
		
	}
	
	.lists {
		
		background: #F5F6FA;
		position: fixed;
		bottom: 0;
		top: 3rem;
		padding-top: 1rem;
		width: 100%;
		overflow-y: scroll;
		-webkit-overflow-scrolling : touch;
	}
	
	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 0.1rem 0.3rem;
		background: url(../assets/image/beijing.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
		
	}
	
	
	
	
	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
		z-index: 99;
	}
	
	.title {
		width: 90%;
		padding:0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
		padding-bottom: 0.3rem;
		
	}
	.title div{
		width: calc(100%/3);
		align-items: center;
	}
	.title>div:nth-child(2){
		text-align: center;
	}
	.add>img {
		width: 1rem;
		height: 1rem;
	}
	.left{
        width: 100%;
		margin: auto;
	}
	.left div{
		width: calc(100%/3);
	}
	.mes>.left>div:nth-child(1) {
		font-size: 0.60869rem;
	}
	
	.mes>.left>div:nth-child(2) {
		font-size: 0.60869rem;
		font-weight: 400;
	}
	
	.mes>.left>div:nth-child(3) {
		color: #007AFF;
		font-size: 0.56522rem;
		font-weight: 400;
		justify-content: flex-end;
	}
	
	
	.operation {
		height: 1rem;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: auto;
		font-size: 0.60869rem;
		padding: 0.2rem 0;
	}
	
	.operation_left {
		height: 100%;
		align-items: center;
	}
	
	.operation_left img {
		width: 0.3919rem;
		height: 0.3919rem;	
		padding-right: 0.5rem;
	}
	.operation>img {
		width: 0.2919rem;
		height: 0.5819rem;	
		
	}
	
	
	.shows {
		border-top: 1px solid #D1D5D8;
		width: 95%;
		margin: auto;
	}
</style>